<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="generator" content="VuePress 2.0.0-beta.61">
    <style>
      :root {
        --c-bg: #fff;
      }
      html.dark {
        --c-bg: #22272e;
      }
      html, body {
        background-color: var(--c-bg);
      }
    </style>
    <script>
      const userMode = localStorage.getItem('vuepress-color-scheme');
			const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
			if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
				document.documentElement.classList.toggle('dark', true);
			}
    </script>
    <script type="text/javascript" src="/lib/tinymce5.10.5/tinymce.min.js"></script><title>路由概念篇 | JN Frontend Docs</title><meta name="description" content="江苏金农股份有限公司前端文档站，站内包含内部组件库、微前端框架等文档">
    <link rel="preload" href="/assets/style-7f06fc9f.css" as="style"><link rel="stylesheet" href="/assets/style-7f06fc9f.css">
    <link rel="modulepreload" href="/assets/app-bfaa94ab.js"><link rel="modulepreload" href="/assets/framework-340c2a10.js"><link rel="modulepreload" href="/assets/routerConcept.html-d2000500.js"><link rel="modulepreload" href="/assets/routerConcept.html-6accad32.js"><link rel="prefetch" href="/assets/index.html-c08dba9c.js" as="script"><link rel="prefetch" href="/assets/index.html-db435b79.js" as="script"><link rel="prefetch" href="/assets/letconst.html-3b192b16.js" as="script"><link rel="prefetch" href="/assets/熟悉而陌生的模块化.html-9f3227d8.js" as="script"><link rel="prefetch" href="/assets/Address.html-f7647e70.js" as="script"><link rel="prefetch" href="/assets/BaseDrawerContent.html-ab3037a8.js" as="script"><link rel="prefetch" href="/assets/BaseModule.html-1478fa1c.js" as="script"><link rel="prefetch" href="/assets/ButtonGroup.html-fcf3a331.js" as="script"><link rel="prefetch" href="/assets/Collapse.html-7a8cea51.js" as="script"><link rel="prefetch" href="/assets/DebounceButton.html-72c7ad85.js" as="script"><link rel="prefetch" href="/assets/FigureInput.html-df25dc00.js" as="script"><link rel="prefetch" href="/assets/FilePreview.html-4937fb57.js" as="script"><link rel="prefetch" href="/assets/Form.html-5d6b22f4.js" as="script"><link rel="prefetch" href="/assets/HintBox.html-6835dcbd.js" as="script"><link rel="prefetch" href="/assets/Icon.html-607be958.js" as="script"><link rel="prefetch" href="/assets/IconPicker.html-81fcc2d0.js" as="script"><link rel="prefetch" href="/assets/IrregularTable.html-3334208c.js" as="script"><link rel="prefetch" href="/assets/JnEditor.html-f19354db.js" as="script"><link rel="prefetch" href="/assets/LodingShade.html-ce32f5ba.js" as="script"><link rel="prefetch" href="/assets/Modal.html-1a4aba4c.js" as="script"><link rel="prefetch" href="/assets/OperateExcel.html-13779fda.js" as="script"><link rel="prefetch" href="/assets/SelectTree.html-8eb35b5a.js" as="script"><link rel="prefetch" href="/assets/SelectTreeV2.html-0294e83a.js" as="script"><link rel="prefetch" href="/assets/Table.html-e8baa24a.js" as="script"><link rel="prefetch" href="/assets/Tabs.html-f99f83c2.js" as="script"><link rel="prefetch" href="/assets/Tree.html-94f64c00.js" as="script"><link rel="prefetch" href="/assets/UpdateLog.html-96fed179.js" as="script"><link rel="prefetch" href="/assets/Updateguide.html-d24798ff.js" as="script"><link rel="prefetch" href="/assets/Upload.html-5d77d402.js" as="script"><link rel="prefetch" href="/assets/index.html-b65ce016.js" as="script"><link rel="prefetch" href="/assets/index.html-fe9f70c5.js" as="script"><link rel="prefetch" href="/assets/moenorepo.html-6096f1b5.js" as="script"><link rel="prefetch" href="/assets/subPro.html-36f639d2.js" as="script"><link rel="prefetch" href="/assets/FAQ.html-4ecdac2c.js" as="script"><link rel="prefetch" href="/assets/commitMsg.html-307d426c.js" as="script"><link rel="prefetch" href="/assets/construction.html-99aa1b4d.js" as="script"><link rel="prefetch" href="/assets/environmentVar.html-49d04c3a.js" as="script"><link rel="prefetch" href="/assets/homeDev.html-6a2fb1a0.js" as="script"><link rel="prefetch" href="/assets/index.html-0b6e8117.js" as="script"><link rel="prefetch" href="/assets/microRegList.html-b62877d4.js" as="script"><link rel="prefetch" href="/assets/plan.html-277e3cea.js" as="script"><link rel="prefetch" href="/assets/practice.html-c4d36b33.js" as="script"><link rel="prefetch" href="/assets/production.html-dc42f69e.js" as="script"><link rel="prefetch" href="/assets/quickStart-monorepo.html-7b3b7f8d.js" as="script"><link rel="prefetch" href="/assets/quickStart.html-b6e33c48.js" as="script"><link rel="prefetch" href="/assets/quickStart2.html-b10000c3.js" as="script"><link rel="prefetch" href="/assets/scheme.html-d542f716.js" as="script"><link rel="prefetch" href="/assets/storeMage.html-815c6185.js" as="script"><link rel="prefetch" href="/assets/theme.html-465ca127.js" as="script"><link rel="prefetch" href="/assets/v1ToV2.html-9a2bc18d.js" as="script"><link rel="prefetch" href="/assets/workflow.html-6e534c27.js" as="script"><link rel="prefetch" href="/assets/index.html-81fa1c2b.js" as="script"><link rel="prefetch" href="/assets/painSpot.html-77e2c96b.js" as="script"><link rel="prefetch" href="/assets/resolve.html-2a8f8dad.js" as="script"><link rel="prefetch" href="/assets/index.html-bdc10a52.js" as="script"><link rel="prefetch" href="/assets/bom.html-ced4003b.js" as="script"><link rel="prefetch" href="/assets/dom.html-3d9c1f79.js" as="script"><link rel="prefetch" href="/assets/download.html-fc87bd6a.js" as="script"><link rel="prefetch" href="/assets/index.html-193d1a36.js" as="script"><link rel="prefetch" href="/assets/install.html-c6c6b180.js" as="script"><link rel="prefetch" href="/assets/number.html-9929ee21.js" as="script"><link rel="prefetch" href="/assets/object.html-62e9bd7c.js" as="script"><link rel="prefetch" href="/assets/storage.html-438a0e0f.js" as="script"><link rel="prefetch" href="/assets/string.html-66b8ad68.js" as="script"><link rel="prefetch" href="/assets/tree.html-6b8c9496.js" as="script"><link rel="prefetch" href="/assets/FormGenerate.html-493fc23c.js" as="script"><link rel="prefetch" href="/assets/Bar.html-ba9fe5e8.js" as="script"><link rel="prefetch" href="/assets/Basic.html-e8fb918f.js" as="script"><link rel="prefetch" href="/assets/Line.html-4604e09a.js" as="script"><link rel="prefetch" href="/assets/Pie.html-c30a8814.js" as="script"><link rel="prefetch" href="/assets/InfoAutocomplete.html-00b41d3e.js" as="script"><link rel="prefetch" href="/assets/InfoSelect.html-671c17bd.js" as="script"><link rel="prefetch" href="/assets/InfoSelectAll.html-9008c8b4.js" as="script"><link rel="prefetch" href="/assets/assets.html-260242e8.js" as="script"><link rel="prefetch" href="/assets/componentConcept.html-6e4317dc.js" as="script"><link rel="prefetch" href="/assets/componentPractical.html-9086711f.js" as="script"><link rel="prefetch" href="/assets/directives.html-d0ae2312.js" as="script"><link rel="prefetch" href="/assets/indexes.html-e77392a8.js" as="script"><link rel="prefetch" href="/assets/pageContentAuths.html-4d589490.js" as="script"><link rel="prefetch" href="/assets/pages.html-c55a8bc5.js" as="script"><link rel="prefetch" href="/assets/requestApi.html-88bb2797.js" as="script"><link rel="prefetch" href="/assets/requestConcept.html-adda0d11.js" as="script"><link rel="prefetch" href="/assets/requestPractical.html-faecae2b.js" as="script"><link rel="prefetch" href="/assets/requestProxy.html-3200aa1f.js" as="script"><link rel="prefetch" href="/assets/routerPractical.html-512c6707.js" as="script"><link rel="prefetch" href="/assets/storeConcept.html-e22e9ac7.js" as="script"><link rel="prefetch" href="/assets/storePractical.html-247d8533.js" as="script"><link rel="prefetch" href="/assets/typesConcept.html-e1076ad0.js" as="script"><link rel="prefetch" href="/assets/typesPractical.html-a063ac6b.js" as="script"><link rel="prefetch" href="/assets/basic-old.html-e813c095.js" as="script"><link rel="prefetch" href="/assets/basic.html-96becbed.js" as="script"><link rel="prefetch" href="/assets/dependence.html-43d38fc7.js" as="script"><link rel="prefetch" href="/assets/micro-od.html-9dfcee74.js" as="script"><link rel="prefetch" href="/assets/micro.html-c39098c6.js" as="script"><link rel="prefetch" href="/assets/404.html-f9875e7b.js" as="script"><link rel="prefetch" href="/assets/index.html-48aa5787.js" as="script"><link rel="prefetch" href="/assets/index.html-d608a849.js" as="script"><link rel="prefetch" href="/assets/letconst.html-3f2e0b96.js" as="script"><link rel="prefetch" href="/assets/熟悉而陌生的模块化.html-4ff45b9c.js" as="script"><link rel="prefetch" href="/assets/Address.html-42ef6369.js" as="script"><link rel="prefetch" href="/assets/BaseDrawerContent.html-ca2f5dbf.js" as="script"><link rel="prefetch" href="/assets/BaseModule.html-bcac5fb3.js" as="script"><link rel="prefetch" href="/assets/ButtonGroup.html-45240bc0.js" as="script"><link rel="prefetch" href="/assets/Collapse.html-2820a639.js" as="script"><link rel="prefetch" href="/assets/DebounceButton.html-a6375e54.js" as="script"><link rel="prefetch" href="/assets/FigureInput.html-6a9e4a73.js" as="script"><link rel="prefetch" href="/assets/FilePreview.html-f7c5e9fe.js" as="script"><link rel="prefetch" href="/assets/Form.html-3068bdf0.js" as="script"><link rel="prefetch" href="/assets/HintBox.html-bbf1cd9e.js" as="script"><link rel="prefetch" href="/assets/Icon.html-d95e3688.js" as="script"><link rel="prefetch" href="/assets/IconPicker.html-81a7e524.js" as="script"><link rel="prefetch" href="/assets/IrregularTable.html-a890399c.js" as="script"><link rel="prefetch" href="/assets/JnEditor.html-bf85cd36.js" as="script"><link rel="prefetch" href="/assets/LodingShade.html-c0d28ff3.js" as="script"><link rel="prefetch" href="/assets/Modal.html-794dcc40.js" as="script"><link rel="prefetch" href="/assets/OperateExcel.html-b0ba91a0.js" as="script"><link rel="prefetch" href="/assets/SelectTree.html-595c0e38.js" as="script"><link rel="prefetch" href="/assets/SelectTreeV2.html-34bccf21.js" as="script"><link rel="prefetch" href="/assets/Table.html-d73c36b9.js" as="script"><link rel="prefetch" href="/assets/Tabs.html-84faed0a.js" as="script"><link rel="prefetch" href="/assets/Tree.html-3667a114.js" as="script"><link rel="prefetch" href="/assets/UpdateLog.html-4a1f3631.js" as="script"><link rel="prefetch" href="/assets/Updateguide.html-02371534.js" as="script"><link rel="prefetch" href="/assets/Upload.html-10ba1ca0.js" as="script"><link rel="prefetch" href="/assets/index.html-c47a30df.js" as="script"><link rel="prefetch" href="/assets/index.html-320567a6.js" as="script"><link rel="prefetch" href="/assets/moenorepo.html-576011bb.js" as="script"><link rel="prefetch" href="/assets/subPro.html-75b57a23.js" as="script"><link rel="prefetch" href="/assets/FAQ.html-f1fca6c0.js" as="script"><link rel="prefetch" href="/assets/commitMsg.html-6acdc46a.js" as="script"><link rel="prefetch" href="/assets/construction.html-46da6ea7.js" as="script"><link rel="prefetch" href="/assets/environmentVar.html-cc5e18a8.js" as="script"><link rel="prefetch" href="/assets/homeDev.html-45d74a50.js" as="script"><link rel="prefetch" href="/assets/index.html-957a05f9.js" as="script"><link rel="prefetch" href="/assets/microRegList.html-58159017.js" as="script"><link rel="prefetch" href="/assets/plan.html-f544d172.js" as="script"><link rel="prefetch" href="/assets/practice.html-9190a049.js" as="script"><link rel="prefetch" href="/assets/production.html-efcd58ad.js" as="script"><link rel="prefetch" href="/assets/quickStart-monorepo.html-fa679827.js" as="script"><link rel="prefetch" href="/assets/quickStart.html-b2b2cf91.js" as="script"><link rel="prefetch" href="/assets/quickStart2.html-f4e9daf8.js" as="script"><link rel="prefetch" href="/assets/scheme.html-554f0667.js" as="script"><link rel="prefetch" href="/assets/storeMage.html-6e8d9e82.js" as="script"><link rel="prefetch" href="/assets/theme.html-769f6eb6.js" as="script"><link rel="prefetch" href="/assets/v1ToV2.html-3ae59d40.js" as="script"><link rel="prefetch" href="/assets/workflow.html-9f9833c6.js" as="script"><link rel="prefetch" href="/assets/index.html-3970f3cb.js" as="script"><link rel="prefetch" href="/assets/painSpot.html-24db33c6.js" as="script"><link rel="prefetch" href="/assets/resolve.html-84653b13.js" as="script"><link rel="prefetch" href="/assets/index.html-b7232fce.js" as="script"><link rel="prefetch" href="/assets/bom.html-ea3a3186.js" as="script"><link rel="prefetch" href="/assets/dom.html-9edcb1e4.js" as="script"><link rel="prefetch" href="/assets/download.html-4dd3d345.js" as="script"><link rel="prefetch" href="/assets/index.html-b478f1d0.js" as="script"><link rel="prefetch" href="/assets/install.html-3a798661.js" as="script"><link rel="prefetch" href="/assets/number.html-f73b01de.js" as="script"><link rel="prefetch" href="/assets/object.html-3bffe94b.js" as="script"><link rel="prefetch" href="/assets/storage.html-02163cce.js" as="script"><link rel="prefetch" href="/assets/string.html-2368bc12.js" as="script"><link rel="prefetch" href="/assets/tree.html-795d0257.js" as="script"><link rel="prefetch" href="/assets/FormGenerate.html-112e9811.js" as="script"><link rel="prefetch" href="/assets/Bar.html-b734d02b.js" as="script"><link rel="prefetch" href="/assets/Basic.html-8aa29fd5.js" as="script"><link rel="prefetch" href="/assets/Line.html-0006a111.js" as="script"><link rel="prefetch" href="/assets/Pie.html-e5d8de5a.js" as="script"><link rel="prefetch" href="/assets/InfoAutocomplete.html-335586cf.js" as="script"><link rel="prefetch" href="/assets/InfoSelect.html-19b6bfa4.js" as="script"><link rel="prefetch" href="/assets/InfoSelectAll.html-ba486e6d.js" as="script"><link rel="prefetch" href="/assets/assets.html-c2237689.js" as="script"><link rel="prefetch" href="/assets/componentConcept.html-d44f97dc.js" as="script"><link rel="prefetch" href="/assets/componentPractical.html-4c106614.js" as="script"><link rel="prefetch" href="/assets/directives.html-1374cfb4.js" as="script"><link rel="prefetch" href="/assets/indexes.html-e9face96.js" as="script"><link rel="prefetch" href="/assets/pageContentAuths.html-7e4a0e5b.js" as="script"><link rel="prefetch" href="/assets/pages.html-5c59cfc9.js" as="script"><link rel="prefetch" href="/assets/requestApi.html-815bdaf3.js" as="script"><link rel="prefetch" href="/assets/requestConcept.html-19ae22e9.js" as="script"><link rel="prefetch" href="/assets/requestPractical.html-2adeb105.js" as="script"><link rel="prefetch" href="/assets/requestProxy.html-fbb23d6e.js" as="script"><link rel="prefetch" href="/assets/routerPractical.html-67a23ee0.js" as="script"><link rel="prefetch" href="/assets/storeConcept.html-3efb81b4.js" as="script"><link rel="prefetch" href="/assets/storePractical.html-72548894.js" as="script"><link rel="prefetch" href="/assets/typesConcept.html-83bcd54c.js" as="script"><link rel="prefetch" href="/assets/typesPractical.html-a8643161.js" as="script"><link rel="prefetch" href="/assets/basic-old.html-5fa6f14d.js" as="script"><link rel="prefetch" href="/assets/basic.html-82c1a5e3.js" as="script"><link rel="prefetch" href="/assets/dependence.html-f50c9128.js" as="script"><link rel="prefetch" href="/assets/micro-od.html-67e0eb46.js" as="script"><link rel="prefetch" href="/assets/micro.html-882e2183.js" as="script"><link rel="prefetch" href="/assets/404.html-1cace4e3.js" as="script"><link rel="prefetch" href="/assets/demoBlock-547ba88b.js" as="script"><link rel="prefetch" href="/assets/update-log-block-723bb72d.js" as="script"><link rel="prefetch" href="/assets/demo1-12d68d90.js" as="script"><link rel="prefetch" href="/assets/demo2-9eb3d5e3.js" as="script"><link rel="prefetch" href="/assets/demo3-cad48c33.js" as="script"><link rel="prefetch" href="/assets/demo4-00837823.js" as="script"><link rel="prefetch" href="/assets/hideDetail-73eabcb6.js" as="script"><link rel="prefetch" href="/assets/demo1-d30bc42d.js" as="script"><link rel="prefetch" href="/assets/card-49344c01.js" as="script"><link rel="prefetch" href="/assets/cardButton-2ab573df.js" as="script"><link rel="prefetch" href="/assets/custom-2e1d5ce9.js" as="script"><link rel="prefetch" href="/assets/formAndTable-a9e89390.js" as="script"><link rel="prefetch" href="/assets/formFast-68efe74c.js" as="script"><link rel="prefetch" href="/assets/custom-8ee84dfd.js" as="script"><link rel="prefetch" href="/assets/demo1-3e00eea3.js" as="script"><link rel="prefetch" href="/assets/demo1-13d09bea.js" as="script"><link rel="prefetch" href="/assets/coreCustom-44473ea3.js" as="script"><link rel="prefetch" href="/assets/demo1-ffb79487.js" as="script"><link rel="prefetch" href="/assets/moreSearchPopup-e8539b49.js" as="script"><link rel="prefetch" href="/assets/moreSearchPopupTabular-0b018d46.js" as="script"><link rel="prefetch" href="/assets/moreSearchPullDown-a130f024.js" as="script"><link rel="prefetch" href="/assets/moreSearchPullDownTabular-76657876.js" as="script"><link rel="prefetch" href="/assets/selecttion-c7803256.js" as="script"><link rel="prefetch" href="/assets/tabs-d56f6b99.js" as="script"><link rel="prefetch" href="/assets/demo1-0816d60f.js" as="script"><link rel="prefetch" href="/assets/demo2-9ecc5665.js" as="script"><link rel="prefetch" href="/assets/bootstrapLayout-1ea184c9.js" as="script"><link rel="prefetch" href="/assets/controlGroup-e8c42887.js" as="script"><link rel="prefetch" href="/assets/customLabel-4a16a282.js" as="script"><link rel="prefetch" href="/assets/demo1-c21fdd62.js" as="script"><link rel="prefetch" href="/assets/demo2-41d266a2.js" as="script"><link rel="prefetch" href="/assets/demo3-269fd0f6.js" as="script"><link rel="prefetch" href="/assets/demo4-00f66ba2.js" as="script"><link rel="prefetch" href="/assets/demo5-dda7cc5a.js" as="script"><link rel="prefetch" href="/assets/showToolTip-d3b9b379.js" as="script"><link rel="prefetch" href="/assets/uploadDemo-c32953ff.js" as="script"><link rel="prefetch" href="/assets/demo1-b5788180.js" as="script"><link rel="prefetch" href="/assets/demo2-c260ab31.js" as="script"><link rel="prefetch" href="/assets/demo3-6cdf8519.js" as="script"><link rel="prefetch" href="/assets/customColor-3d9de184.js" as="script"><link rel="prefetch" href="/assets/demo0-d1d86d70.js" as="script"><link rel="prefetch" href="/assets/demo1-768aae0e.js" as="script"><link rel="prefetch" href="/assets/demo2-09509e5d.js" as="script"><link rel="prefetch" href="/assets/demo3-7b5c78e1.js" as="script"><link rel="prefetch" href="/assets/demo1-1fef897c.js" as="script"><link rel="prefetch" href="/assets/demo2-9eb823cc.js" as="script"><link rel="prefetch" href="/assets/design-d18997c2.js" as="script"><link rel="prefetch" href="/assets/drawingBoard-b0338214.js" as="script"><link rel="prefetch" href="/assets/bindEvents-dffae645.js" as="script"><link rel="prefetch" href="/assets/classic-0a187567.js" as="script"><link rel="prefetch" href="/assets/contentStorage-975c1b84.js" as="script"><link rel="prefetch" href="/assets/distraction-80ebb968.js" as="script"><link rel="prefetch" href="/assets/form-eaa75a02.js" as="script"><link rel="prefetch" href="/assets/getInstance-23efae27.js" as="script"><link rel="prefetch" href="/assets/inline-6be92b15.js" as="script"><link rel="prefetch" href="/assets/serverUpload-df40118c.js" as="script"><link rel="prefetch" href="/assets/demo1-b740e314.js" as="script"><link rel="prefetch" href="/assets/demo1-68bb6031.js" as="script"><link rel="prefetch" href="/assets/demo2-df4d048d.js" as="script"><link rel="prefetch" href="/assets/demo3-28e0085f.js" as="script"><link rel="prefetch" href="/assets/verticalCenter-129ef695.js" as="script"><link rel="prefetch" href="/assets/demo1-98350cb8.js" as="script"><link rel="prefetch" href="/assets/demo2-7f6ee778.js" as="script"><link rel="prefetch" href="/assets/demo1-f7056bc7.js" as="script"><link rel="prefetch" href="/assets/demo2-a0ba8b6f.js" as="script"><link rel="prefetch" href="/assets/demo1-1c313755.js" as="script"><link rel="prefetch" href="/assets/demo2-c2582bd1.js" as="script"><link rel="prefetch" href="/assets/demo3-a4610510.js" as="script"><link rel="prefetch" href="/assets/demo1-18fbac0d.js" as="script"><link rel="prefetch" href="/assets/demo2-9cab9d84.js" as="script"><link rel="prefetch" href="/assets/demo3-0bbd970b.js" as="script"><link rel="prefetch" href="/assets/demo4-51797bfb.js" as="script"><link rel="prefetch" href="/assets/demo5-43641915.js" as="script"><link rel="prefetch" href="/assets/demo6-b040d95c.js" as="script"><link rel="prefetch" href="/assets/demo7-ce249bbd.js" as="script"><link rel="prefetch" href="/assets/demo8-edf67670.js" as="script"><link rel="prefetch" href="/assets/hideColumnDemo-69627cb7.js" as="script"><link rel="prefetch" href="/assets/oprationColumnConfiger-c237144b.js" as="script"><link rel="prefetch" href="/assets/validate-fbf1b277.js" as="script"><link rel="prefetch" href="/assets/demo1-d9847e60.js" as="script"><link rel="prefetch" href="/assets/demo2-11587063.js" as="script"><link rel="prefetch" href="/assets/demo1-291c9baa.js" as="script"><link rel="prefetch" href="/assets/demo2-52e0c845.js" as="script"><link rel="prefetch" href="/assets/demo3-568b7e8b.js" as="script"><link rel="prefetch" href="/assets/demo4-927e1acc.js" as="script"><link rel="prefetch" href="/assets/avatar-15cf2607.js" as="script"><link rel="prefetch" href="/assets/disabled-433e98ce.js" as="script"><link rel="prefetch" href="/assets/picture-card-c1a8bb4b.js" as="script"><link rel="prefetch" href="/assets/picture-ef3755b5.js" as="script"><link rel="prefetch" href="/assets/preview-f61e7e14.js" as="script"><link rel="prefetch" href="/assets/text-09ef0872.js" as="script"><link rel="prefetch" href="/assets/demo1-a3645ecb.js" as="script"><link rel="prefetch" href="/assets/demo2-d734f7c1.js" as="script"><link rel="prefetch" href="/assets/demo3-0dfdb25a.js" as="script"><link rel="prefetch" href="/assets/demo4-2fb2cce1.js" as="script"><link rel="prefetch" href="/assets/demo5-b421d6bb.js" as="script"><link rel="prefetch" href="/assets/demo6-16ebc159.js" as="script"><link rel="prefetch" href="/assets/demo1-490f80f0.js" as="script"><link rel="prefetch" href="/assets/demo2-e79b66d1.js" as="script"><link rel="prefetch" href="/assets/demo3-f504fcea.js" as="script"><link rel="prefetch" href="/assets/demo4-edeaa9ad.js" as="script"><link rel="prefetch" href="/assets/demo5-f8626895.js" as="script"><link rel="prefetch" href="/assets/demo1-8a123b0e.js" as="script"><link rel="prefetch" href="/assets/demo2-69d4255d.js" as="script"><link rel="prefetch" href="/assets/demo3-2afab6da.js" as="script"><link rel="prefetch" href="/assets/advance-a564dd5c.js" as="script"><link rel="prefetch" href="/assets/demo1-15b4a1ee.js" as="script"><link rel="prefetch" href="/assets/demo2-b3c9e3c3.js" as="script"><link rel="prefetch" href="/assets/demo3-376435ef.js" as="script"><link rel="prefetch" href="/assets/demo4-a8f3de98.js" as="script"><link rel="prefetch" href="/assets/demo5-064b8bb9.js" as="script"><link rel="prefetch" href="/assets/formInside-98b98293.js" as="script"><link rel="prefetch" href="/assets/index-4853382f.js" as="script"><link rel="prefetch" href="/assets/tableInside-481256b6.js" as="script"><link rel="prefetch" href="/assets/closeInit-cb2ef70b.js" as="script"><link rel="prefetch" href="/assets/formInside-4ba7da68.js" as="script"><link rel="prefetch" href="/assets/index-7816f63c.js" as="script"><link rel="prefetch" href="/assets/tableInside-57de18ec.js" as="script"><link rel="prefetch" href="/assets/formInside-e196b3cb.js" as="script"><link rel="prefetch" href="/assets/hideHeader-7f741a3f.js" as="script"><link rel="prefetch" href="/assets/index-06f007ac.js" as="script"><link rel="prefetch" href="/assets/tableInside-8789cc27.js" as="script"><link rel="prefetch" href="/assets/index-43c3d78a.js" as="script">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/favicon.ico" alt="JN Frontend Docs"><span class="site-name can-hide">JN Frontend Docs</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/components/" class="" aria-label="组件库"><!--[--><!--]--> 组件库 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/micro/" class="router-link-active" aria-label="微前端"><!--[--><!--]--> 微前端 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/micro-cli/" class="" aria-label="micro-cli"><!--[--><!--]--> micro-cli <!--[--><!--]--></a></div><div class="navbar-item"><a href="/utilsDocs/" class="" aria-label="utils"><!--[--><!--]--> utils <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="更新日志"><span class="title">更新日志</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="更新日志"><span class="title">更新日志</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a href="/components/UpdateLog.md" class="" aria-label="组件库@3.0.0"><!--[--><!--]--> 组件库@3.0.0 <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/micro/updateLog/basic.md" class="" aria-label="统一管理平台@2.4.0"><!--[--><!--]--> 统一管理平台@2.4.0 <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/micro/updateLog/dependence.md" class="" aria-label="微应用依赖"><!--[--><!--]--> 微应用依赖 <!--[--><!--]--></a></li><!--]--></ul></div></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><form class="search-box" role="search"><input type="search" autocomplete="off" spellcheck="false" value><!----></form></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/components/" class="" aria-label="组件库"><!--[--><!--]--> 组件库 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/micro/" class="router-link-active" aria-label="微前端"><!--[--><!--]--> 微前端 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/micro-cli/" class="" aria-label="micro-cli"><!--[--><!--]--> micro-cli <!--[--><!--]--></a></div><div class="navbar-item"><a href="/utilsDocs/" class="" aria-label="utils"><!--[--><!--]--> utils <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="更新日志"><span class="title">更新日志</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="更新日志"><span class="title">更新日志</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a href="/components/UpdateLog.md" class="" aria-label="组件库@3.0.0"><!--[--><!--]--> 组件库@3.0.0 <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/micro/updateLog/basic.md" class="" aria-label="统一管理平台@2.4.0"><!--[--><!--]--> 统一管理平台@2.4.0 <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/micro/updateLog/dependence.md" class="" aria-label="微应用依赖"><!--[--><!--]--> 微应用依赖 <!--[--><!--]--></a></li><!--]--></ul></div></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading">微前端 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/micro/index.md" class="sidebar-item" aria-label="概念"><!--[--><!--]--> 概念 <!--[--><!--]--></a><!----></li><li><a href="/micro/scheme.md" class="sidebar-item" aria-label="可用方案"><!--[--><!--]--> 可用方案 <!--[--><!--]--></a><!----></li><li><a href="/micro/practice.md" class="sidebar-item" aria-label="优缺点对比"><!--[--><!--]--> 优缺点对比 <!--[--><!--]--></a><!----></li><li><a href="/micro/plan.md" class="sidebar-item" aria-label="落地改造"><!--[--><!--]--> 落地改造 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/micro/v1ToV2.md" class="sidebar-item sidebar-heading" aria-label="v1升v2指南"><!--[--><!--]--> v1升v2指南 <!--[--><!--]--></a><!----></li><li><a href="/micro/storeMage.md" class="sidebar-item sidebar-heading" aria-label="仓库管理[淘汰]"><!--[--><!--]--> 仓库管理[淘汰] <!--[--><!--]--></a><!----></li><li><a href="/micro/commitMsg.md" class="sidebar-item sidebar-heading" aria-label="提交日志规范"><!--[--><!--]--> 提交日志规范 <!--[--><!--]--></a><!----></li><li><a href="/micro/microRegList.md" class="sidebar-item sidebar-heading" aria-label="微应用注册列表"><!--[--><!--]--> 微应用注册列表 <!--[--><!--]--></a><!----></li><li><a href="/micro/quickStart-monorepo.md" class="sidebar-item sidebar-heading" aria-label="快速开始"><!--[--><!--]--> 快速开始 <!--[--><!--]--></a><!----></li><li><a href="/micro/construction.md" class="sidebar-item sidebar-heading" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----></li><li><a href="/micro/environmentVar.md" class="sidebar-item sidebar-heading" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">模块详解 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/micro/moduleDetail/indexes.md" class="sidebar-item" aria-label="索引"><!--[--><!--]--> 索引 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item collapsible">系统类型 <span class="right arrow"></span></p><ul style="display:none;" class="sidebar-item-children"><!--[--><li><a href="/micro/moduleDetail/typesConcept.md" class="sidebar-item" aria-label="概念"><!--[--><!--]--> 概念 <!--[--><!--]--></a><!----></li><li><a href="/micro/moduleDetail/typesPractical.md" class="sidebar-item" aria-label="实体类使用"><!--[--><!--]--> 实体类使用 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/micro/moduleDetail/assets.md" class="sidebar-item" aria-label="资源"><!--[--><!--]--> 资源 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item active collapsible">路由 <span class="down arrow"></span></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/micro/moduleDetail/routerConcept.md" class="sidebar-item active" aria-label="概念"><!--[--><!--]--> 概念 <!--[--><!--]--></a><!----></li><li><a href="/micro/moduleDetail/routerPractical.md" class="sidebar-item" aria-label="实用"><!--[--><!--]--> 实用 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item collapsible">全局状态管理 <span class="right arrow"></span></p><ul style="display:none;" class="sidebar-item-children"><!--[--><li><a href="/micro/moduleDetail/storeConcept.md" class="sidebar-item" aria-label="概念"><!--[--><!--]--> 概念 <!--[--><!--]--></a><!----></li><li><a href="/micro/moduleDetail/storePractical.md" class="sidebar-item" aria-label="实用"><!--[--><!--]--> 实用 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item collapsible">请求 <span class="right arrow"></span></p><ul style="display:none;" class="sidebar-item-children"><!--[--><li><a href="/micro/moduleDetail/requestConcept.md" class="sidebar-item" aria-label="概念"><!--[--><!--]--> 概念 <!--[--><!--]--></a><!----></li><li><a href="/micro/moduleDetail/requestApi.md" class="sidebar-item" aria-label="api"><!--[--><!--]--> api <!--[--><!--]--></a><!----></li><li><a href="/micro/moduleDetail/requestPractical.md" class="sidebar-item" aria-label="实用"><!--[--><!--]--> 实用 <!--[--><!--]--></a><!----></li><li><a href="/micro/moduleDetail/requestProxy.md" class="sidebar-item" aria-label="代理配置"><!--[--><!--]--> 代理配置 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/micro/moduleDetail/pages.md" class="sidebar-item" aria-label="页面"><!--[--><!--]--> 页面 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item collapsible">组件 <span class="right arrow"></span></p><ul style="display:none;" class="sidebar-item-children"><!--[--><li><a href="/micro/moduleDetail/componentConcept.md" class="sidebar-item" aria-label="概念"><!--[--><!--]--> 概念 <!--[--><!--]--></a><!----></li><li><a href="/micro/moduleDetail/componentPractical.md" class="sidebar-item" aria-label="实用"><!--[--><!--]--> 实用 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/micro/moduleDetail/directives.md" class="sidebar-item" aria-label="指令"><!--[--><!--]--> 指令 <!--[--><!--]--></a><!----></li><li><a href="/micro/moduleDetail/pageContentAuths.md" class="sidebar-item" aria-label="页面级权限控制"><!--[--><!--]--> 页面级权限控制 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/micro/theme.md" class="sidebar-item sidebar-heading" aria-label="主题"><!--[--><!--]--> 主题 <!--[--><!--]--></a><!----></li><li><a href="/micro/homeDev.md" class="sidebar-item sidebar-heading" aria-label="首页开发"><!--[--><!--]--> 首页开发 <!--[--><!--]--></a><!----></li><li><a href="/micro/workflow.md" class="sidebar-item sidebar-heading" aria-label="流程平台"><!--[--><!--]--> 流程平台 <!--[--><!--]--></a><!----></li><li><a href="/micro/production.md" class="sidebar-item sidebar-heading" aria-label="生产&amp;发布"><!--[--><!--]--> 生产&amp;发布 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item sidebar-heading">常见问题 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/micro/FAQ.md#页面跳转" class="sidebar-item" aria-label="页面跳转"><!--[--><!--]--> 页面跳转 <!--[--><!--]--></a><!----></li><li><a href="/micro/FAQ.md#内嵌-iframe-主动激活-帆软报表" class="sidebar-item" aria-label="内嵌 iframe"><!--[--><!--]--> 内嵌 iframe <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="路由概念篇" tabindex="-1"><a class="header-anchor" href="#路由概念篇" aria-hidden="true">#</a> 路由概念篇</h1><p>当前篇幅为路由的概念介绍，包含了</p><ul><li>一些封装思想</li><li>模块文件组成</li><li>基座应用和微应用的不同之处</li><li>各个功能所做的事情一览</li></ul><p>篇幅较长，偏概念，适合想探究具体内容、学习路由封装的同事查看</p><p>请结合具体的源码食用</p><h2 id="何为路由" tabindex="-1"><a class="header-anchor" href="#何为路由" aria-hidden="true">#</a> 何为路由？</h2><p>路由即通过匹配规则实现某种行为（页面切换）的过程；</p><p>每个应用本质都是单页面应用，和传统的前端开发不同，单页面应用通过监听 url 的变化，决定在页面中渲染哪个组件，通过处理 url，使得页面切换不再需要依赖后台，也就是我们所说的前端路由。</p><p>由于当前技术栈为 vue，路由使用的是 <a href="https://router.vuejs.org/zh/" target="_blank" rel="noopener noreferrer">Vue-Router4<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><p>前端开发者应该熟练掌握 vue-router 的使用，可以从以下切入：</p><ul><li>注册</li><li>导航守卫</li><li>路由跳转、编程式导航</li></ul><p>框架已经对 vue-rouetr 进行了封装</p><h2 id="路由注册模式" tabindex="-1"><a class="header-anchor" href="#路由注册模式" aria-hidden="true">#</a> 路由注册模式</h2><p>在框架中，路由的注册分为两种：</p><ul><li><p>前端控制路由（静态路由）</p><blockquote><p>使用场景：前端不想依赖后台，只是单独页面的开发，还未到联调工作；<br> 不适用：路由权限控制（要基于接口）、按钮权限控制</p></blockquote></li><li><p>后台控制路由（动态路由）</p><blockquote><p>使用场景：线上、权限控制 <br> 不适用：后台网络不通，开发页面不方便</p></blockquote></li></ul><div class="custom-container tip"><p class="custom-container-title">注意</p><p>整个系统的权限控制，都是基于动态路由去做的，在进行上线部署、测试等工作时，一定要将路由模式改为动态路由模式</p><p>在打包生产时，框架已将路由模式使用为 后台控制路由，这个各位开发不用关心，需要关心的是开发模式下路由模式的切换</p></div><h2 id="路由配置与系统菜单" tabindex="-1"><a class="header-anchor" href="#路由配置与系统菜单" aria-hidden="true">#</a> 路由配置与系统菜单</h2><p>系统菜单会基于路由的配置自动生成，无论静态路由还是动态路由，框架内部抹平了差异，统一了数据结构</p><h2 id="模块内容" tabindex="-1"><a class="header-anchor" href="#模块内容" aria-hidden="true">#</a> 模块内容</h2><p>文件划分</p><p><img src="/images/realize/router-module.png" alt="路由模块"></p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>├── backEnd.ts <span class="token comment"># 动态路由处理核心</span>
├── common <span class="token comment"># 公共路由配置文件夹</span>
├── frontEnd.ts <span class="token comment"># 静态路由处理核心</span>
├── index.ts <span class="token comment"># 路由实例</span>
└── modules <span class="token comment"># 业务模块路由配置文件夹</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container tip"><p class="custom-container-title">TIP</p><p>路由模块基座应用和微应用的文件目录组成都是一样的，但是内部的实现略有不同，后续会列出基座应用和微应用的区别</p></div><h3 id="内容详解" tabindex="-1"><a class="header-anchor" href="#内容详解" aria-hidden="true">#</a> 内容详解</h3><h4 id="入口" tabindex="-1"><a class="header-anchor" href="#入口" aria-hidden="true">#</a> 入口</h4><p>index.ts 文件是整个系统的 vue-router 实例的创建、配置、抛出等</p><p>接下来会从基座应用和微应用出发，详解两种框架路由入口所做的大致事情，<strong>后续的模块</strong>都将以这这种方式进行对比</p><h5 id="基座应用" tabindex="-1"><a class="header-anchor" href="#基座应用" aria-hidden="true">#</a> 基座应用</h5><ol><li><p>实例创建</p><ul><li><ol><li>以 common 路由配置模块为入口，添加路由；</li></ol></li><li><ol start="2"><li>以 hash 模式创建路由；</li></ol></li></ul></li><li><p>添加路由前置钩子</p><ul><li><ol><li>启动 NProgress 加载进度条</li></ol></li><li><ol start="2"><li>设置页面标题</li></ol></li><li><ol start="3"><li>提交路由加载状态为开始（用于页面加载 loading 标识）</li></ol></li><li><ol start="4"><li>判断是否为业务路由</li></ol></li><li><ol start="5"><li>判断登录过期</li></ol></li><li><ol start="6"><li>依据路由模式加载路由配置，动态需要请求接口数据等，跳转到 backEnd.ts 内</li></ol></li><li><ol start="7"><li>对 iframe、login、微应用等路由特殊处理，重定向等</li></ol></li></ul></li><li><p>添加路由后置钩子</p><ul><li><ol><li>结束 NProgress 的加载</li></ol></li><li><ol start="2"><li>提交路由加载状态为结束</li></ol></li><li><ol start="3"><li>判断是否是登录后（首次登录或重新登录），提交首次登录状态</li></ol></li></ul></li><li><p>抛出 router 实例</p></li></ol><h5 id="微应用" tabindex="-1"><a class="header-anchor" href="#微应用" aria-hidden="true">#</a> 微应用</h5><ol><li><p>实例创建</p><ul><li><ol><li>以 common 路由配置模块为入口，添加路由；</li></ol></li><li><ol start="2"><li>以 hash 模式创建路由；</li></ol></li></ul></li><li><p>添加路由前置钩子</p><ul><li><ol><li>启动 NProgress 加载进度条</li></ol></li><li><ol start="2"><li>设置页面标题（父子应用公用一个 html，对于标题的设置，无论是基座应用修改，还是微应用修改，后加载的优先级更高）</li></ol></li><li><ol start="3"><li>提交路由加载状态为开始（微应用自己的加载状态，考虑去掉）</li></ol></li><li><ol start="4"><li>判断是否为动态路由的同时，判断应用功能树中是否包含当前系统的节点（依据 package.json 中的 name 配置），如果没有，则 return 后续判断</li></ol></li><li><ol start="5"><li>判断路由模式，加载对应的路由文件，动态添加路由</li></ol></li><li><ol start="6"><li>动态添加完路由后，重定到目标路由</li></ol></li></ul></li><li><p>添加路由后置钩子</p><ul><li><ol><li>结束 NProgress 的加载</li></ol></li><li><ol start="2"><li>提交路由加载状态为结束</li></ol></li></ul></li><li><p>抛出 router 实例</p></li></ol><div class="custom-container tip"><p class="custom-container-title">TIP</p><p>在加载微应用之前，基座应用的路由钩子是一定会被触发的（微应用资源的加载与解析一定是依据基座应用的路由匹配程度来完成的），所以，对于登录鉴权的配置，只需要在基座应用进行就可以了</p><p>当登录失效时，路由根本不会跳转到微应用的匹配路径，而微应用只需要关心自己的业务路由的注册及跳转就可以了</p><p>得出分工：</p><ul><li>基座应用基础设施路由配置、路由鉴权、页面加载状态</li><li>微应用，加载并注册对应模式的业务路由</li></ul></div><h4 id="静态路由处理核心" tabindex="-1"><a class="header-anchor" href="#静态路由处理核心" aria-hidden="true">#</a> 静态路由处理核心</h4><p>前文已知框架的路由注册分为静态路由与动态路由，静态路由的注册处理主要由 <code>/src/router/frontEnd.ts</code> 完成</p><div class="custom-container tip"><p class="custom-container-title">TIP</p><p>纵观框架下来，你会发现每个核心模块下都添加了 <code>modules</code> 文件夹的区分，在使用过程中，你会发现你只需要编写配置对应的模块，而不需要其他的处理，如引用、注册</p><p>是因为各个大模块下，都采用了<strong>自动化引用</strong>的一个概念，把引用、注册的脏活累活，都交给了框架统一处理</p><p>自动化引用，都是基于 <a href="https://www.jianshu.com/p/c894ea00dfec" target="_blank" rel="noopener noreferrer">require.context<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a> 这个 api 来完成的</p><p>请记住 <strong style="color:#ff3040;">自动化</strong> 的概念，这属于前端工程化的一部分</p></div><h5 id="基座应用-1" tabindex="-1"><a class="header-anchor" href="#基座应用-1" aria-hidden="true">#</a> 基座应用</h5><p>由于基座应用需要对应用菜单负责，在处理静态路由的同时，需要抛出基础的路由树形结构</p><ol><li><p>依据路由模式，决定抛出的数组，如果是后台控制路由，则为空</p></li><li><p>自动化引入 <code>./modules/xxx.ts</code> 模块</p></li><li><p>判断是否为微应用的静态路由（是否是 <code>./modules/microApps/</code> 目录下的文件），如果是，在微应用路由静态配置对象的基础之上，添加微应用的前缀（因为微应用的配置是不包含自己应用名称的，为了便捷复制，路由添加应用前缀的工作交给了自动化处理工具）</p><blockquote><p>一是需要判断是否在 <code>microApps</code> 目录下；<br> 二是要判断对应的微应用是否已经注册；<br> 微应用前缀是用来匹配微应用路由以加载目标资源的</p></blockquote></li><li><p>基于基座应用的配置数组+微应用的配置数组，做两件事情</p><ul><li><ol><li>保持树形结构，提交全局状态管理，作为应用功能菜单的数据源</li></ol></li><li><ol start="2"><li>树形结构拉平，形成一维注册路由数组返回（会由 <code>./common/index.ts</code> 引用）</li></ol></li></ul></li><li><p>抛出注册数组</p></li></ol><h5 id="微应用-1" tabindex="-1"><a class="header-anchor" href="#微应用-1" aria-hidden="true">#</a> 微应用</h5><p>微应用不同于基座应用，微应用不需要维护菜单数据，也就是不需要维护树形结构</p><ol><li><p>自动化引入 <code>./modules/</code> 下的模块</p></li><li><p>为每个路由节点添加基座应用传递的基础路由（基座应用传递的是应用名称，嵌套应用传递的是当前路由）</p></li><li><p>经过方法处理成一维数组</p><blockquote><p>这里会有一个特殊处理：如果路由是标识模糊匹配的，则需要添加 <code>xxx/:page*</code> 来适应模糊匹配，常用于嵌套应用的配置</p></blockquote></li><li><p>抛出注册数组</p></li></ol><div class="custom-container tip"><p class="custom-container-title">TIP</p><p>无论是静态路由还是动态路由，微应用都只是单纯的业务路由模块注册，没有嵌套（除了父级应用传递的基础路径），直接运行在 根 <code>router-view</code> 中的</p><p>在基座应用中体现到业务展示区域（中心区域）</p></div><h4 id="动态路由处理核心" tabindex="-1"><a class="header-anchor" href="#动态路由处理核心" aria-hidden="true">#</a> 动态路由处理核心</h4><p>文件： <code>/src/router/backEnd.ts</code></p><h5 id="基座应用-2" tabindex="-1"><a class="header-anchor" href="#基座应用-2" aria-hidden="true">#</a> 基座应用</h5><p>动态路由的处理，基于后台返回（异步，内部会采用 await 阻塞路由的跳转）的当前用户的权限应用功能树，在系统进行修改应用功能树时，会自动重新加载，以适应新的改变</p><p>其中的实时改变包括</p><ul><li>菜单信息</li><li>路由配置</li><li>路由元信息</li></ul><ol><li><p>核心为 async 函数，内部 await 阻塞</p></li><li><p>监听当前登录用户的菜单全局状态树（结果处理）</p><blockquote><p>通过监听全局状态的变化，重新执行路由的处理、添加等</p></blockquote></li><li><p>阻塞性请求后台数据，在响应完成后，提交全局状态：当前用户的应用功能树</p></li><li><p>递归处理功能树</p><blockquote><p>保持树形结构，作为应用功能菜单的数据源 树形结构拉平，获得一维注册路由数组，数组遍历使用 <code>router.addRoute</code> 添加到布局路由组件中</p></blockquote></li><li><p>提交二者</p></li><li><p>执行完成，返回继续导航</p></li></ol><h5 id="微应用-2" tabindex="-1"><a class="header-anchor" href="#微应用-2" aria-hidden="true">#</a> 微应用</h5><p>微应用动态路由的配置数组，是经由基座应用处理过的，其中包括</p><ul><li>path 的处理</li><li>组件的引用处理</li><li>路由元信息的装填</li><li>错误组件的添加</li></ul><p>换句话说，微应用的动态路由是同步的，不需要再请求数据，微应用只需要对父级应用传递的数据进行筛选注册即可</p><ol><li><p>筛选以当前系统名称（package.json 下的 name）开头的路由配置对象</p></li><li><p>二次处理路径（基于路由的元数据 <code>componentPath</code>），某些情况下，需要将当前应用的名称替换为父级应用传递的<a href="https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/env?id=__micro_app_base_route__" target="_blank" rel="noopener noreferrer">基础路由<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a>（基座应用传递的适用应用名称，嵌套应用的则不适用，所以需要替换）</p><blockquote><p>这里会有一个特殊处理：如果路由是标识模糊匹配的，则需要添加 <code>xxx/:page*</code> 来适应模糊匹配，常用于嵌套应用的配置</p></blockquote></li><li><p>基于元数据 <code>componentPath</code>，进行当前系统的组件装填（别名应用、views 文件夹等），及加载错误组件的装填</p></li><li><p>将二次处理的整个路由配置，添加到当前微应用的路由实例中</p></li><li><p>将处理的注册路由数组，提交到全局（微应用）状态树中，微应用的注册数组未体现实际使用价值</p></li></ol><h4 id="公共路由文件夹" tabindex="-1"><a class="header-anchor" href="#公共路由文件夹" aria-hidden="true">#</a> 公共路由文件夹</h4><h5 id="基座应用-3" tabindex="-1"><a class="header-anchor" href="#基座应用-3" aria-hidden="true">#</a> 基座应用</h5><p>common 文件夹有两个作用</p><ul><li>存放公共路由模块</li><li>引入静态路由</li></ul><p>目前基座应用的公共路由模块内容如下：</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>├── index.ts
├── microAppBaseRoute.ts
└── my.ts
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol><li>index.ts 是公共路由的入口，内部应用静态路由</li><li>microAppBaseRoute 是使用静态路由的方式添加已注册微应用的保险路由的路由数组（所谓的保险数组是指以微应用的注册名称开头，确保每个以微应用名称开头的路由都能匹配到微应用路由根组件）</li><li>my.ts 是系统的个人设置模块的路由，属于公共路由的模块划分</li></ol><h5 id="微应用-3" tabindex="-1"><a class="header-anchor" href="#微应用-3" aria-hidden="true">#</a> 微应用</h5><p>内容如下</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>├── blurry.ts
├── exposes.ts
├── index.ts
└── utils.ts
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol><li><p>index.js 包含公共路由的注册、父级应用<a href="https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/env?id=__micro_app_base_route__" target="_blank" rel="noopener noreferrer">基础路由<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a> 的添加</p></li><li><p>exposes 作为向外提供的组件的静态路由配置（详见嵌套应用的使用）</p><blockquote><p>由于一个应用作为物料提供者向外提供的内容是确定性的，所以，仅需将生产物以静态路由的方式注册即可<br> 由于路由是确定的，我们也不需要通过路由元信息自动处理模糊匹配，我们只需要在注册路由时，明确注册为模糊匹配即可</p></blockquote></li><li><p>blurry 其他一些模糊匹配的路由，暂无实际体现，预留配置文件</p></li><li><p>utils.ts 处理工具文件</p></li></ol><div class="custom-container tip"><p class="custom-container-title">TIP</p><p>作为微应用的公共静态路由模块，也是需要添加父级传递的基础路径的，由于没有经过 <code>frontEnd.ts</code> 的处理，需要自己做一层特殊处理</p></div><h4 id="业务路由模块" tabindex="-1"><a class="header-anchor" href="#业务路由模块" aria-hidden="true">#</a> 业务路由模块</h4><p><code>/src/router/modules</code> 文件夹用来存放静态业务路由的模块</p><p>模块内容，基座应用和微应用的内容一致</p><p>区别在于，由于静态路由文件是物理磁盘上的存储概念，基座应用并不能便捷的拿到微应用的静态路由，所以需要复制粘贴微应用的静态路由到基座应用的模块下</p><p>需要放到 <code>/src/router/modules/microApps/</code> 再以微应用名称划分文件目录</p><div class="custom-container tip"><p class="custom-container-title">TIP</p><p>这里的微应用名称目录是至关重要的，基座应用的静态路由处理核心会把这个目录名称作为路由的匹配前缀进行拼接</p></div><h2 id="路由信息配置对象" tabindex="-1"><a class="header-anchor" href="#路由信息配置对象" aria-hidden="true">#</a> 路由信息配置对象</h2><div class="custom-container tip"><p class="custom-container-title">TIP</p><p>整个路由配置的方式，都是基于路由配置对象去完成的，后台动态路由同样是将数据结构转换成（抹平差异）路由配置对象；</p><p>说直白些，路由就是对于路由配置对象的堆砌；</p><p>路由配置对象，也限制了接口，接口位于 <code>/src/@types/Route.ts</code></p><p>文件抛出了一个默认的配置对象的类型，并抛出了路由元信息（meta）的类型</p><p>开发人员应该熟练掌握路由配置对象的属性，理解了路由配置对象，才能灵活的配置路由</p></div><h3 id="配置对象" tabindex="-1"><a class="header-anchor" href="#配置对象" aria-hidden="true">#</a> 配置对象</h3><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">interface</span> <span class="token class-name">RouteConfig</span> <span class="token punctuation">{</span>
    path<span class="token operator">:</span> _RouteRecordBase<span class="token punctuation">[</span><span class="token string">&#39;path&#39;</span><span class="token punctuation">]</span>
    meta<span class="token operator">:</span> RouteMeta
    name<span class="token operator">?</span><span class="token operator">:</span> _RouteRecordBase<span class="token punctuation">[</span><span class="token string">&#39;name&#39;</span><span class="token punctuation">]</span>
    component<span class="token operator">?</span><span class="token operator">:</span> RouteComponent <span class="token operator">|</span> Lazy<span class="token operator">&lt;</span>RouteComponent<span class="token operator">&gt;</span>
    children<span class="token operator">?</span><span class="token operator">:</span> RouteConfig<span class="token punctuation">[</span><span class="token punctuation">]</span>
    redirect<span class="token operator">?</span><span class="token operator">:</span> _RouteRecordBase<span class="token punctuation">[</span><span class="token string">&#39;redirect&#39;</span><span class="token punctuation">]</span>
    alias<span class="token operator">?</span><span class="token operator">:</span> _RouteRecordBase<span class="token punctuation">[</span><span class="token string">&#39;alias&#39;</span><span class="token punctuation">]</span>
    props<span class="token operator">?</span><span class="token operator">:</span> RouteRecordNormalized<span class="token punctuation">[</span><span class="token string">&#39;props&#39;</span><span class="token punctuation">]</span>
    beforeEnter<span class="token operator">?</span><span class="token operator">:</span> _RouteRecordBase<span class="token punctuation">[</span><span class="token string">&#39;beforeEnter&#39;</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li><p>path</p><blockquote><p>唯一标识，必须</p></blockquote></li><li><p>meta</p><blockquote><p>路由元信息，包含一些当前路由的处理信息，如：标题，是否隐藏等等</p></blockquote></li><li><p>name</p><blockquote><p>路由名称，可以理解为访问当前路由的一个简写，因为 path 可能会很长，要保证 name 全局唯一，否则会抛出警告</p></blockquote></li><li><p>component</p><blockquote><p>路由要加载的组件，同步引用，或懒加载</p></blockquote></li><li><p>children</p><blockquote><p>子路由，框架采用较严格的父子结构，父子结构会适用于系统菜单的生成，内部会处理成一维数组注册</p></blockquote></li><li><p>redirect</p><blockquote><p><a href="https://router.vuejs.org/zh/guide/essentials/redirect-and-alias.html" target="_blank" rel="noopener noreferrer">重定向<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p></blockquote></li><li><p>alias</p><blockquote><p><a href="https://router.vuejs.org/zh/guide/essentials/redirect-and-alias.html" target="_blank" rel="noopener noreferrer">别名<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p></blockquote></li><li><p>props</p><blockquote><p><a href="https://router.vuejs.org/zh/guide/essentials/passing-props.html" target="_blank" rel="noopener noreferrer">将 props 传递给路由组件<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p></blockquote></li><li><p>beforeEnter</p><blockquote><p><a href="https://router.vuejs.org/zh/guide/advanced/navigation-guards.html" target="_blank" rel="noopener noreferrer">单路由导航守卫<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p></blockquote></li></ul><h3 id="路由元信息" tabindex="-1"><a class="header-anchor" href="#路由元信息" aria-hidden="true">#</a> 路由元信息</h3><p>一些路由的附加信息都是以 meta 的方式进行携带的，各字段含义如下</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">interface</span> <span class="token class-name">RouteMeta</span> <span class="token punctuation">{</span>
    <span class="token doc-comment comment">/**
     * 菜单栏及 tagsView 栏、菜单搜索名称（国际化）
     */</span>
    title<span class="token operator">:</span> <span class="token builtin">string</span>
    <span class="token doc-comment comment">/**
     * 是否超链接菜单，开启外链条件，`1、isLink:true 2、链接地址不为空`
     */</span>
    isLink<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span>
    <span class="token doc-comment comment">/**
     * 是否隐藏此路由
     */</span>
    hidden<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span>
    <span class="token doc-comment comment">/**
     * 是否缓存组件状态
     */</span>
    isCache<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span>
    <span class="token doc-comment comment">/**
     * 是否固定在 tagsView 栏上
     */</span>
    isAffix<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span>
    <span class="token doc-comment comment">/**
     * 是否内嵌窗口，，开启条件，`1、isIframe:true 2、链接地址不为空`
     */</span>
    openMode<span class="token operator">?</span><span class="token operator">:</span> OpenMode
    <span class="token doc-comment comment">/**
     * 图标
     */</span>
    icon<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span>
    <span class="token doc-comment comment">/**
     * 功能类型，和后台对应
     */</span>
    type<span class="token operator">?</span><span class="token operator">:</span> FuncType
    <span class="token doc-comment comment">/**
     * 是否包含按钮功能信息，和后台对应
     */</span>
    btns<span class="token operator">?</span><span class="token operator">:</span> AppFunc<span class="token punctuation">[</span><span class="token punctuation">]</span>
    <span class="token doc-comment comment">/**
     * 路由层级（菜单）
     */</span>
    grade<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span>
    <span class="token doc-comment comment">/**
     * iframe 内嵌外部链接地址
     */</span>
    link<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span>
    <span class="token doc-comment comment">/**
     * 应用功能 id === 路由 id
     * 在后台控制路由时，路由在注册时会被赋予应用功能的 id 作为唯一标识
     * 在配置前台路由时，应尽量与后台应用功能表中的节点 id 对应
     */</span>
    funcId<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span>
    <span class="token doc-comment comment">/**
     * 路由组件路径
     */</span>
    componentPath<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span>
    <span class="token doc-comment comment">/**
     * 是否模糊匹配
     */</span>
    isBlurry<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span>
    <span class="token doc-comment comment">/**
     * 预留字段
     */</span>
    <span class="token punctuation">[</span>k<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token builtin">any</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div><!--[--><!--]--></div><footer class="page-meta"><!----><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 18651805393@163.com">Zyunchao</span><!----><!--]--><!--]--></span></div></footer><!----><!--[--><!--]--></main><!--]--></div><!----><!--]--></div>
    <script type="module" src="/assets/app-bfaa94ab.js" defer></script>
  </body>
</html>
